<script lang="ts" setup>
import { PeaceColumn } from '@/components/type/PeaceColumn'
import { ComponentEnum } from '@/enum/ComponentEnum'
import { NFlex, NTreeSelect, type TreeSelectOption } from 'naive-ui'
import { ifFilterUndefinedRepeatNum } from '@/infrastructure/PeaceDataTable/util/PeaceColumnUtil'
import { ObjectUtil } from '@/util/ObjectUtil'

const props = withDefaults(
  defineProps<{
    peaceItem: PeaceColumn
    index: number
    filterModel: Record<string, unknown>
  }>(),
  {
    show: false
  }
)
// const emit = defineEmits<{
//   (e: 'update:filter-model', value: Record<string, unknown>): void
// }>()
//
// const modelValue = ref<Record<string, unknown>>(JSON.parse(JSON.stringify(props.filterModel)))
// watch(modelValue, (newModelVal) => {
//   // console.log(`x is ${newModelVal}`)
//   emit("update:filter-model",newModelVal)
// },{deep:true,immediate:true})
const modelValue = computed({
  get:()=> props.filterModel,
})
const ifSingleComponent = computed(()=>{
  return props.peaceItem?.filterConfig?.componentEnum
    && props.peaceItem.filterConfig?.componentEnum === ComponentEnum.TREE_SELECT
    && ObjectUtil.isNullOrUndefined(props.peaceItem?.filterConfig?.peaceRender)
    && ifFilterUndefinedRepeatNum(props.peaceItem)
})
</script>
<template>
  <template v-if="ifSingleComponent">
    <n-flex vertical justify="left">
      <label>{{ peaceItem?.title as string }}</label>
      <n-tree-select
        remote
        v-model:value="
                  modelValue[peaceItem.filterConfig?.key] as
                    | string
                    | number
                    | ((string | number)[] & {})
                    | (string | number)[]
                "
        :options="peaceItem.optionConfig?.peaceOption as TreeSelectOption[]"
        :label-field="
                  peaceItem.optionConfig?.peaceLabelField ?? 'label'
                "
        :key-field="
                  peaceItem.optionConfig?.peaceValueField ?? 'value'
                "
        :children-field="
                  peaceItem.optionConfig?.peaceChildField ??'children'
                "
        :placeholder="('请选择' + peaceItem?.title) as string"
        class="w-200px"
      />
    </n-flex>
  </template>
</template>
<style scoped></style>
